<template>
  <div class="studentProducts">
    <!-- 搜索添加学员信息 -->
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="searchValue"
            clearable
            placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          ></el-input>
        </el-form-item>
      <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <template>
          <el-select
            v-model="searchValue"
            filterable
            clearable
            remote
            reserve-keyword
            @click="searchTextChange"
            placeholder="请输入姓名,如果不更新,点击右侧搜索按钮">
            <el-option
              v-for="item in stuData"
              :key="item.sId"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </template> -->

        <!-- 搜索按钮 -->
        <el-form-item>
          <el-button
            @click="onSearchButtonClick"
            type="primary"
            plain>
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>

        <!-- 添加学员信息 -->
        <el-form-item>
          <el-button type="primary" @click="showDialog">
            添加项目
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 弹出框 -->
    <Dialog :visible="visible" @ok="ok" @cancel="cancel" ref="stuDialog"></Dialog>


    <!-- 选择班级 -->
    <div class="select">
      <el-form>
        <el-form-item label="选择班级">
          <el-select 
              v-model="select" 
              filterable
              placeholder="请选择">
            <el-option v-for="(item,i) in valueClass"
              :key="i"
              :label="item.name"
              :value="item">
              </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 导出excel -->
    <div class="exportExcel">
      <el-button @click="exportExcel">
        <i class="iconfont icon-excel"></i>
        <span>导出excel数据</span>
      </el-button>
    </div>

    <!-- 表格 -->
    <div class="stu-tab">
      <el-table :data="stuData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="headimgurl" label="头像" width="100">
          <template v-slot="{row}">
            <el-avatar
              shape="square"
              :size="50"
              :src="row.headimgurl"
            ></el-avatar>
            <!-- <img :src="row.headimgurl" alt="" width="80px"> -->
          </template>
        </el-table-column>
        <el-table-column 
            prop="name" 
            label="姓名" 
            width="120">
        </el-table-column>
        <el-table-column 
            prop="degree" 
            label="学历"> 
        </el-table-column>
        <el-table-column 
            prop="class" 
            label="班级"> 
        </el-table-column>
        <el-table-column 
            prop="productUrl" 
            label="项目"> 
        </el-table-column>
        <el-table-column 
            prop="cTime" 
            label="创建时间"> 
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button
              size="mini"
              class="btn"
              type="primary"
              @click="handleShow">
              <i class="el-icon-view"></i>
              查看
            </el-button>
            <el-button 
              size="mini"
              class="btn"
              type="primary"
              @click="editStu(row)">
              <i class="el-icon-edit"></i>
              编辑
            </el-button>
            <el-button
              size="mini"
              class="btn"
              type="danger"
              @click="deleteStu(row)">
              <i class="el-icon-delete"></i>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="pager">
      <el-pagination 
        hide-on-single-page
        background layout="prev, pager, next" 
        :total="total" 
        :pageSize="pageSize"
        @current-change="pageChange">
      </el-pagination>
    </div>


  </div>
</template>


<script>
import * as api from "../../../../api/users";
import Dialog from "../../../../components/Dialog"
import qee from "qf-export-excel"
export default {

  components: {
    Dialog
  },
  data() {
    return {
      total:0,
      pageSize:0,
      loading:false,
      visible:false,
      title:"",//弹出框标题
      select:"",//班级
      classes:"",//班级
      valueClass:[],
      searchValue: "",
      formInline: {
        user: "",
        region: "",
      },
      stuData: [],
      disabled: false,
     
    };
  },
  created() {
    //获取表格数据
    this.getStuList()
    // api.getStuListApi()
    //   .then((res) => {
    //     if (res.data.state) {
    //       this.stuData = res.data.data;
    //     }else{
    //     }
    // });
    this.classesStu()
  },
  methods: {
    //获取学员列表的方法
    getStuList(count = 10, page = 1, classes){
      this.loading = true;
      classes = this.classes
      // console.log(classes);
      api.getStuListApi(count, page, classes)
        .then((res) => {
          if (res.data.state) {
            this.stuData = res.data.data;
            this.total = res.data.total;
            this.pageSize = count;
            this.loading = false;
          }else{
          }
      });
    },
    //获取班级列表
    classesStu(){
      api.getClassesApi()
       .then(res => {
        this.valueClass = res.data.data;
        console.log(this.valueClass);
       })
    },
    //页码改变
    pageChange(pageSize){
      // console.log(1);
      this.getStuList(undefined,pageSize)
    },
    onSubmit() {
      console.log("submit!");
    },
    
    // 增加学员信息
    showDialog(){
      //清空dialog的数据
      this.$refs.stuDialog.stuForm = {}
      this.visible = true
      this.$refs.stuDialog.title = "增加学员信息"
      // this.title = "增加学员信息"
    },
    //查看学员信息
    handleShow(){
        this.$router.push({path:'/studentmanager/studentprofile'})
    },
    //编辑学员信息
    editStu(row) {
      // console.log(this.$refs.stuDialog)
      //数据回显
      this.$refs.stuDialog.stuForm = {...row}
      this.visible = true
      this.$refs.stuDialog.title = "编辑学员信息"
      // this.title = "编辑学员信息"
      // console.log(row);
    },
    //删除学员信息
    deleteStu(row) {
      // console.log(row.sId);
      this.$confirm('该操作将永久删除数据,是否继续?', '删除提示')
        .then(()=>{
          api.deleteStuApi(row.sId)
            .then(res => {
              if(res.data.state){
                this.$message.success("删除成功")
                this.getStuList()
              }
            })
        })
        .catch(()=>{
          this.$message.error('已取消删除')
        })
    },

    //点击了dialog确定按钮
    ok(formData){
      // console.log('dialogOpen');
      // console.log(formData);
      let dialogTitle = this.$refs.stuDialog.title
      if(dialogTitle === "增加学员信息"){
        api.addStuApi(formData)
        .then(res => {
          // console.log(res);
          if(res.data.state){

          }
        })
      }else if(dialogTitle === "编辑学员信息"){
        api.editStuApi(formData)
          .then(res => {
            // console.log(res);
            if(res.data.state){
              this.getStuList()
              this.$message.success('更新成功')
            }
          })
      }
      
      this.visible = false
    },
    cancel(){
      // console.log('dialogClose');
      this.visible = false

    },
    //导出表格
    exportExcel(){
      //导出的字段有哪些
      let titleList = [{
          title: '头像',
          key: 'headimgurl'
      }, {
          title: '姓名',
          key: 'name'
      }, {
          title: '学历',
          key: 'degree'
      }, {
          title: '班级',
          key: 'class'
      }]
      qee(titleList,this.stuData,'0905项目')
    },
    //搜索学员信息
    // searchTextChange(){

    // },
    //点击搜索按钮
    onSearchButtonClick(){
      let key = this.searchValue
      api.searchStuApi(key)
        .then(res => {
            this.stuData = res.data.data;
        })
      
    },
    search(){
      this.onSearchButtonClick()
    }
  },
  watch: {
    searchValue(){
      this.search()
    },
    select(){
      this.classes = this.select
      console.log(this.classes);
      this.getStuList()
    }
  },
  meta: {
    title: "xyxmgl",
    name: "学员项目管理",
    icon: "iconfont icon-shangpinguanli",
  },
};
</script>

<style lang="less" scoped>
.search {
  // height: 60px;
  text-align: left;
  // line-height: 60px;
  // margin: 20px 0;
  padding-top: 20px;
  /deep/ .el-input__inner{
      width: 300px;
    }
}
.el-form--inline .el-form-item:nth-of-type(1) {
  margin-right: 1px;
}


.el-form {
  height: 60px;
}
.el-input {
  width: 300px;
  font-size: 16px;
}
.select {
  line-height: 40px;
  text-align: left;
  padding-top: 10px;
}
// /deep/ .has-gutter{
//     // line-height: 16px;
// }
// .el-button{
//     width: 65px;
//     height: 25px;
//     line-height: 1;
//     font-size: 14px;
//     // text-align: center;
// }
.el-button--danger:nth-of-type(1) {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.el-button + .el-button:nth-of-type(2) {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
/deep/ .cell {
  text-align: center;
}
.stu-tab {
  margin-bottom: 10px;
}
.exportExcel {
  text-align: right;
  margin-bottom: 10px;
  button {
    border: 1px solid rgb(202, 201, 201);
    color: #606266;
    padding: 4px 7px;
    span {
      font-size: 14px;
    }
  }
}
.icon-excel {
  color: green;
  font-size: 20px;
  margin-right: 3px;
}

</style>